<template>
<div>
	<div style="position: relative;height: 100%;background: #F5F5F5;">
		<div class="gw_kuang">
			<div class="gw_tu"><img src="static/jifen.png"></div>
			<div class="gw_wen">可用积分</div>
			<div class="gw_wen1">{{zhongjiefen}}</div>
			<div class="clearfix"></div>
		</div>
		<div style="width: 100%;height: 8px;background: #F5F5F5;"></div>
		<div v-show="notext">
			<div class="gw_box" v-for="(list,key) in list">
		  		<div class="gw_tu1" style="position: relative;">
		  			<div class="gw_biao" @click="xuanze(key,list.cart_id)"><img :src="list.chose"></div>
			  		<div class="gwtupian1">
			  			<img :src="url + list.goodsImg">
			  		</div>
			  		<div style="display: table;float: left;width: 60%;margin-left: 10px;">
				  		<p style="height:36px; font-size: 14px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow: hidden;line-height: 18px;">{{list.goodsName}}</p>
					  		<p style="font-size: 12px;color: #9b9b9b;line-height: 12px;margin-top: 5px;">{{list.shuxing}}</p>
					  		<p style="line-height: 13px;font-size: 14px;color: #FF2E22;margin-top: 6px;float: left;">{{list.jifen}} 积分</p>
					  		<p class="clearfix"></p>
				  		<!-- </ul> -->
				  	</div>
			  		<p class="clearfix"></p>
			  		<div class="gw_su" style="position: absolute;bottom: 0;right: 0;">
			  			<input @click="jian(key,list.cart_id)" type="button" value="-" class="gw_1"/>
			  			<input type="number" v-model="list.num" class="gw_2" readonly/>
			  			<input @click="jia(key,list.cart_id)" type="button" value="+" class="gw_3"/>
			  		</div>
			  		<div style="position: absolute;top:0;right:0;display:table;" @click="shuanch(list.cart_id)">
			  			<img src="static/delete@3x.png" style="width: 20px;height: 20px;">
			  		</div>
		  		</div>
			</div>	
			<div class="gw_pq">
				<div class="gw_pq1" @click="allxuan">
					<img :src="allchose">
					<p>全选</p>
				</div>
				<router-link :to="{path:'/querendingdan',query:{panduan:1}}">
					<input type="button" value="去兑换" class="gw_pq4"/>
				</router-link>
				<div style="position: absolute;right: 130px;height: 49px;bottom: 0;">
					<div class="gw_pq3">合计：{{heji}}积分</div>
					<div class="gw_pq5">不含运费</div>
				</div>
			</div>
			<div style="width: 100%;height: 8px;background: #F5F5F5;"></div>
		</div>
		<div class="zanwu" v-show="!notext" style="background-color: #fff;padding-top:50px;"><p>暂无信息</p></div>
	</div>
	<confirm v-model="show" :title="('操作提示')" @on-confirm="onConfirm">
        <p style="text-align:center;">{{ ('确定要删除吗？') }}</p>
    </confirm>
    <toast v-model="show1" type="text" :time="800" position="middle">{{tishi}}</toast>
</div>
</template>

<script>
	import axios from 'axios' 
	import { mapState, mapActions } from 'vuex'
	import { Confirm } from 'vux'
	export default {
		components: {
			mapState, 
			mapActions,
			Confirm
		},
		data() {
			return {
				jifen1:220,
				jifen:'220',
				value:'',
				enjoy:false,
				list:'',
				allchose:'static/successful_small.png',
				zhongjiefen:'',
				notext:true,
				show:false,
				deleteid:'',
				tishi:'',
				show1:false,
				heji:'',
				xianshi:false,
			}
		},
		created(){
			this.getshuju();
		},
		methods: {
			getshuju(){
				var that = this;
				axios.post(that.url+"/home/Gwc/getCartByopenId",{openid:this.token})
		        .then(function(res){
		            console.log(res);
		            if(res.data.info == 0){
		            	console.log(0)
		            	that.notext = false;
		            	that.zhongjiefen = res.data.zongjifen;
			           	that.heji = res.data.countjifen;
		            }else{
		            	console.log(1)
		            	that.notext = true;
		            	for(var i=0;i<res.data.info.length;i++){
			            	if(res.data.info[i].is_check == '1'){
			            		res.data.info[i].chose = 'static/successful_small.png'
			            	}else{
			            		res.data.info[i].chose = 'static/wei.png';
			            		that.allchose = 'static/wei.png';
			            	}
			            }
			            that.list = res.data.info;
			            that.zhongjiefen = res.data.zongjifen;
			           	that.heji = res.data.countjifen;
		            }
		        })
		        .catch(function(err){
		            console.log(err);
		        })
			},
			shuanch(cart_id){
				this.show = true;
				this.deleteid = cart_id;
			},
			onConfirm (msg) {
				var that = this;
				axios.post(that.url+"/home/Gwc/delCart",{openid:this.token,cart_id:this.deleteid})
		        .then(function(res){
		            // console.log(res);
		            if(res.data.status == 1){
		            	that.show1 = true;
		            	that.tishi = '删除成功'
		            	that.getshuju();
		            }else{
		            	that.show1 = true;
		            	that.tishi = res.data.msg;
		            }
		        })
		        .catch(function(err){
		            console.log(err);
		        })
    		},
			enjoying(){
				this.enjoy = true;
			},
			xiaoshi(){
				this.enjoy = false;
			},
			jianjia(cart_id,num){
				var that = this;
				axios.post(that.url+"/home/Gwc/changeCartNum",{openid:this.token,cart_id:cart_id,num:num})
		        .then(function(res){
		            // console.log(res);
		        })
		        .catch(function(err){
		            console.log(err);
		        })
			},
			jia(key,cart_id){
				this.list[key].num++;
				this.jianjia(cart_id,this.list[key].num);
				this.jisuan();
			},
			jian(key,cart_id){
				if(this.list[key].num>1){
					this.list[key].num--;
					this.jianjia(cart_id,this.list[key].num);
					this.jisuan();
				}else{
					this.list[key].num=1;
					this.jianjia(cart_id,this.list[key].num);
					this.jisuan();
				}
				
			},
			xuanze(key,cart_id){
				if(this.list[key].chose == 'static/successful_small.png'){
					var that = this;
					axios.post(that.url+"/home/Gwc/checkCart",{openid:this.token,is_check:0,cart_id:cart_id})
			        .then(function(res){
			            // console.log(res);
			            that.list[key].chose = 'static/wei.png'
			        })
			        .catch(function(err){
			            console.log(err);
			        })				
			    }else{
			    	var that = this;
					axios.post(that.url+"/home/Gwc/checkCart",{openid:this.token,is_check:1,cart_id:cart_id})
			        .then(function(res){
			            // console.log(res);
			            that.list[key].chose = 'static/successful_small.png'
			        })
			        .catch(function(err){
			            console.log(err);
			        })
				}
			},
			allxuan(){
				if(this.allchose == 'static/successful_small.png'){
					var that = this;
					axios.post(that.url+"/home/Gwc/checkCartAll",{openid:this.token,is_check:0})
			        .then(function(res){
			            // console.log(res);
			            that.allchose = 'static/wei.png';
						for(var i=0;i<that.list.length;i++){
							that.list[i].chose = 'static/wei.png';
						}
						that.heji = 0;
			        })
			        .catch(function(err){
			            console.log(err);
			        })
				}else{
					var that = this;
					axios.post(that.url+"/home/Gwc/checkCartAll",{openid:this.token,is_check:1})
			        .then(function(res){
			            // console.log(res);
			            that.allchose = 'static/successful_small.png';
						for(var i=0;i<that.list.length;i++){
							that.list[i].chose = 'static/successful_small.png';
							that.heji += that.list[i].num*that.list[i].jifen;
						}
			        })
			        .catch(function(err){
			            console.log(err);
			        })
				}
			},
			jisuan(){
				this.heji = 0;
				for(var i=0;i<this.list.length;i++){
					if(this.list[i].chose == 'static/successful_small.png'){
						this.heji += this.list[i].num*this.list[i].jifen;
					}
				}
			}
		},
		computed:{
            ...mapState({
                token: state => state.Token.userToken()//获取用户Token
            }),
        }
	}
</script>

<style scoped>
.zanwu {width: 100%;}
.zanwu p {font-size: 14px;line-height: 20px;text-align: center;}
.gw_kuang{
	height: 40px;
	width: 100%;
	padding: 10px 15px;
	background: #FFFFFF;
}
.gw_tu{
	height: 24px;
	width: 24px;
	float: left;
}
.gw_wen{
	float: left;
	line-height: 20px;
	font-size: 14px;
	color: #333333;
	margin-left:10px;
}
.gw_wen1{
	float: left;
	line-height: 22px;
	font-size: 16px;
	color: #00C850;
	margin-left: 10px;
}
.clearfix{
	float: none;
	clear: both;
}
.gw_box{
	background: #FFFFFF;
	border-bottom: 1px solid red;
	border: 1px /*solid*/ black;
	padding: 12px 15px;
	
}	
.gw_tu1{
	border: 1px /*solid*/ red;
	margin-top: 0px;
}
.gwtupian1{
	height: 75px;
	width: 75px;
	float: left;
	margin-left: 10px;
}
.gwtupian1 img {
	width: 100%;height: 100%;
}
.gwwenzi{margin-left:10px;
		float: left;
		box-sizing: border-box;
		border: /*solid*/ yellow 1px;
		
		}
.gwcheng_1{
	float: right;
	margin-top: 10px;
	line-height: 13px;
	font-size: 13PX;
	color: #4A4A4A;
}	
.gw_biao{
	float: left;
	height: 20px;
	width: 20px;
	margin-top: 35px;
	border-radius: 50%;
}
.gw_biao img {width: 100%;height: 100%;}
.gw_su{
	float: right;
}	
.gw_su input{
	text-align: center;
}	
.gw_1{
	float: left;
	height: 24px;
	width: 30px;
	background: #FFFFFF;
	border: none;
	outline: none;
	border: 1px solid #CCCCCC;
}
.gw_2{
	float: left;
	height: 24px;
	width: 41px;
	background: #FFFFFF;
	border: none;
	outline: none;
	border: 1px solid #CCCCCC;
}	
.gw_3{
	float: right;
	height: 24px;
	width: 24px;
	font-size: 14px;
	background: #FFFFFF;
	border: none;
	outline: none;
	border: 1px solid #CCCCCC;
}	
.gw_pq{
	width: 100%;
	
	background: #FFFFFF;
	position: fixed;
	bottom: 0px;
}
.gw_pq1{
	height: 20px;
	width:55px;
	float: left;
	margin-left: 10px;
	margin-top: 15px;
}
.gw_pq1 img {width: 18px;height: 18px;float: left;margin-top: 1px;}
.gw_pq1 p {float: left;font-size: 14px;line-height: 20px;margin-left: 5px;color: #4A4A4A;}
.gw_pq2{
	line-height: 20px;
	font-size: 14px;
	float: left;
	color: #4A4A4A;
	margin-left: 30px;
	margin-top: 14px;
}
.gw_pq3{
	line-height: 14px;
	font-size: 14px;
	color: #333333;
	margin-top: 10px;
	
}
.gw_pq4{
	float: right;
	background: #00C850;
	color: #FFFFFF;
	border-radius: 4px;
	height: 49px;
	width:125px ;
	font-size: 14px;
	border: none;
	outline: none;
}	
.gw_pq5{
	line-height: 11px;
	font-size: 11px;
	float: right;
	color: #9B9B9B;
	margin-top: 10px;
	margin-right: 10px;
}			
</style>
